import React, { Component } from 'react';
import { bindActionCreators } from "redux";
import { connect } from "react-redux";
import ReactCSSTransitionGroup from "react-addons-css-transition-group";
import * as common from 'common/common.js';
import * as userInfoActions from 'common/userinfo.js';
import Top from 'common/containers/top.js';
import Bottom from 'common/containers/bottom.js';
import './app.less';
import './init.less';
import style from "./animate.less";

/**
 * 根路由组件
 */
class App extends Component{

	constructor(props) {
	    super(props);
	    setInterval(() => {
	    	if(common.cacheGet("cacheFlag")){
	    		common.cacheClear();
	    	}
	    }, 300000);
	    this.state = {
	    	backHandleFlag: false,
	    	prevRouteUrl: '',
	    	nextRouteUrl: '',
	    	selectMenuIndex: 0,
	    	menus: [
				{
					menuName: '主页',
					menuImg: 'assets/img/menu_1.png',
					selectedMenuImg: 'assets/img/menu_1_s.png',
					menuUrl: '/'
				},
				{
					menuName: '书友',
					menuImg: 'assets/img/menu_2.png',
					selectedMenuImg: 'assets/img/menu_2_s.png',
					menuUrl: '/friend'
				},
				{
					menuName: '书架',
					menuImg: 'assets/img/menu_3.png',
					selectedMenuImg: 'assets/img/menu_3_s.png',
					menuUrl: '/bookShelf'
				},
				{
					menuName: '我的',
					menuImg: 'assets/img/menu_4.png',
					selectedMenuImg: 'assets/img/menu_4_s.png',
					menuUrl: '/user'
				}
			]
	    }
  	}

	//悬浮返回主页
	backHome = () => {
		window.scrollTo(0,0);
	}
	
	//左上角返回事件
	backHandle = () => {
		window.history.back();
	}
	
	//右上角工具事件
	toolHandle = () => {
		alert("工具")
	}
	
	//底部菜单事件
	menuHandle = (selectMenu, index) => {
		if(selectMenu != this.props.router.location.pathname){
			this.props.router.replace(selectMenu);
			this.setState({
				selectMenuIndex: index
			})
		}
	}

	render(){
		//showTop：是否显示头部    title：标题   showBack：是否显示左上角返回
		//showTool：是否显示右上角工具   showBottom：是否显示底部菜单
		//showBackHome：是否显示悬浮返回   selectMenuIndex：选中底部菜单项
		const { showTop, title, showBack, showTool, showBottom, showBackHome, selectMenuIndex } = this.props.children.props.route;
		//头部标题栏信息
		const topInfo = {
			title: title == undefined ? common.DEFAULT_TITLE : title,
			showBack: showBack == undefined ? true : false,
			showTool: showTool == undefined ? false : true
		}
		//底部菜单栏信息
		const menuInfo = {
			selectMenuIndex: selectMenuIndex ? selectMenuIndex : this.state.selectMenuIndex,
			menus: this.state.menus
		}
		//根组件app信息
		const appInfo = {
			showTop: showTop == undefined ? true : false,
			showBottom: showBottom == undefined ? false : true,
			showBackHome: showBackHome == undefined ? true : false
		}
		//头部底部间距
		let appClass = "";
		if(appInfo.showBottom){
			appClass = "show_mb";	
		}

		const mainRouteArrays = ["home", "friend", "bookShelf", "user"];

		let animateFlag = true;
		let prevRouteUrl = this.props.userinfo.prevRouteUrl;
		let currentRouteUrl = this.props.location.pathname.replace("/","");
		if(currentRouteUrl == ""){
			currentRouteUrl = "home";
		}

		if(mainRouteArrays.indexOf(prevRouteUrl) != -1
		   && mainRouteArrays.indexOf(currentRouteUrl) != -1
		   && !this.state.backHandleFlag){
			animateFlag = false;
		}

		if(!animateFlag){
			return(
	            <ReactCSSTransitionGroup
			        transitionName="transitionMain"
			        component="div"
			        className={style.transitionMain}
			        transitionEnterTimeout={200}
			        transitionLeaveTimeout={200}>
		            <div key={this.props.location.pathname} className={appClass} style={{position:"absolute", width: "100%"}}>
						{
							appInfo.showTop && <Top topInfo={topInfo} backHandle={this.backHandle} toolHandle={this.toolHandle}></Top>
						}
						{this.props.children}
						{
							appInfo.showBottom && <Bottom menuInfo={menuInfo} menuHandle={this.menuHandle}></Bottom>
						}
						{
							appInfo.showBackHome && 
							<div className="backHome" onClick={this.backHome}>
								<img src='assets/img/home.png'/>
							</div>
						}
					</div>
		      	</ReactCSSTransitionGroup>
			)
		}else{
			return(
				<ReactCSSTransitionGroup
			        transitionName="transitionWrapper"
			        component="div"
			        className={style.transitionWrapper}
			        transitionEnterTimeout={200}
			        transitionLeaveTimeout={200}>
		            <div key={this.props.location.pathname} className={appClass} style={{position:"absolute", width: "100%"}}>
						{
							appInfo.showTop && <Top topInfo={topInfo} backHandle={this.backHandle} toolHandle={this.toolHandle}></Top>
						}
						{this.props.children}
						{
							appInfo.showBottom && <Bottom menuInfo={menuInfo} menuHandle={this.menuHandle}></Bottom>
						}
						{
							appInfo.showBackHome && 
							<div className="backHome" onClick={this.backHome}>
								<img src='assets/img/backTop.png'/>
							</div>
						}
					</div>
		      	</ReactCSSTransitionGroup>
			)
		}
	}
}

function mapStateToProps(state){
	return {
		userinfo: state.userinfo
	}
}

function mapDispatchToProps(dispatch){
	return {}
}

export default connect(
	mapStateToProps,
	mapDispatchToProps
)(App);